@import '~styles/config.scss';

.SlideVerify {
    padding:30px 0px;
    .img {
        margin:0px auto;
        width        : 200px;
        height       : 200px;
        overflow     : hidden;
        border-radius: 100%;
        transition   : transform 0.1s;

        img {
            width : 100%;
            height: 100%;
        }
    }

    .box {
        
        position   : relative;
        // position: fixed;
        // top:0px; left:0px; width:80%;
        // z-index: 100;
        user-select: none;

        height: 40px;
        width : 280px;

        background   : #fff;
        margin       : 20px auto 0px auto;
        border-radius: 40px;
        border       : 2px solid rgba(0,0,0,0.05);
        
        .tips{
            text-align: center;
            width:100%; height:100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color:$--color-text-secondary;
        }
        .but {
            z-index: 2;
            border-radius  : 40px;
            position       : absolute;
            left           : 0px;
            top            : 0px;
            height         : 40px;
            background     : $--color-primary;
            width          : 40px;
            display        : flex;
            align-items    : center;
            justify-content: center;
            cursor         : move;
            box-shadow     : 0px 0px 10px rgba(0,0,0,0.1);

            i {
                color      : #fff;
                font-weight: bold;
                font-size  : 20px;

            }

            &::after {
                content : '';
                position: absolute;
                top     : 0px;
                left    : 0px;
                height  : 100%;
                width   : 100%;
                z-index : 1;

            }
        }
    }
}